<script setup>
import { useObject, q } from "#imports";
import { ref } from "vue";
const { data: obj } = await useObject({
  custom_field_id: true,
  name: true,
  model: true,
  validation: true,
  type: true,
  label: true,
  options: true,
  default_value: true,
  placeholder: true,
  order: true,
  help: true
});
const types = [
  { label: "Text", value: "text" },
  { label: "Textarea", value: "textarea" },
  { label: "Select", value: "select" },
  { label: "Date", value: "date" },
  { label: "Time", value: "time" }
];
const { app } = await q({
  app: {
    customFieldModels: true
  }
});
const up = (v2) => {
  console.log(v2);
};
const v = ref("required");
</script>

<template>
    <l-page>

        <form-kit type="l-form" :value="obj" #default="{ value, node }">
            <form-kit type="l-input" name="name" label="Name" validation="required" />

            <form-kit type="l-select" name="model" label="Model" :options="app.customFieldModels"
                validation="required" />

            <form-kit type="l-select" name="type" label="Type" :options="types" validation="required" />

            <form-kit type="hidden" name="validation" />
            <l-validation-input v-model="value.validation" @update:model-value="node.at('validation').input($event)"
                :type="value.type" />

            <form-kit type="l-input" name="label" label="Label" validation="required" />
            <form-kit type="hidden" name="options" />
            <template v-if="value.type === 'select'">

                <q-select label="Options" v-model="value.options" @update:model-value="node.at('options').input($event)"
                    use-input use-chips multiple hide-dropdown-icon input-debounce="0" new-value-mode="add-unique"
                    stack-label outlined placeholder="Press enter to add new option" />
            </template>

            <form-kit type="l-input" name="default_value" label="Default Value" />

            <form-kit type="l-input" name="placeholder" label="Placeholder" />

            <form-kit type="l-input" input-type="number" name="order" label="Order" number />

            <form-kit type="l-input" name="help" label="Help" />

        </form-kit>
    </l-page>
</template>
